<template>
  <el-card shadow="hover" class="register">
    <div class="register-box">
      <div class="register-box-title">{{ item.title }}</div>
      <div class="register-box-content">
        <div class="register-box-content-quantity">
          <svg-icon :icon-class="item.iconName" size="18"></svg-icon>
          <el-statistic :value="outputValue"></el-statistic>
        </div>
        <div class="register-box-content-percentage">{{ item.percentage }}</div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
  import { ref, toRefs } from 'vue'
  import { useTransition } from '@vueuse/core'
  const props = defineProps({
    item: {
      type: Object,
      required: true,
    },
  })
  const { item } = toRefs(props)
  const count = ref(0)
  const outputValue = useTransition(count, {
    duration: 1500,
  })
  count.value = item.value.count
</script>

<style lang="scss" scoped>
  .register {
    &-box {
      &-content {
        &-quantity {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .el-statistic {
            --el-statistic-content-font-size: 28px;
            margin-left: 10px;
          }
        }
        &-percentage {
          font-weight: 600;
          font-size: 18px;
        }
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      &-title {
        margin-bottom: 10px;
        font-size: 16px;
      }
    }
    &:hover {
      transform: translateY(-2px) scale(1.01);
      box-shadow: 0 14px 24px #0003;
    }
  }
</style>
